<template>
  <div class="cargoP">
    <div class="searchPP">

      <div class="searchP">
        <div class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入商户姓名或电话"
            shape="round"
            v-model="keyword"
            :show-action="false"
          ></u-search>
        </div>
        <!-- <div @click="celendarM" class="celendar">
                <img :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <div>2019.10.09</div>
                </div> -->
      </div>
    </div>
    <div
      class="hr-line"
      style="height: 0.2rem; background-color: #f3f5f7"
    ></div>

    <div class="scan">
      <div style="display: flex; align-items: center">
        <img
          style="padding: 0.5rem; width: 2rem"
          src="../../style/image/cargo/scan.png"
          alt=""
        />
        <div
          @click="ScanM()"
          style="
            font-size: 0.84rem;
            font-family: PingFang SC;
            font-weight: 399;
            color: #000000;
          "
        >
          扫一扫(扫描设备二维码快捷铺货)
        </div>
      </div>

      <img
        style="width: 0.5rem; height: 0.8rem; padding: 1rem"
        src="../../style/image/cargo/back.png"
        alt=""
      />
    </div>

    <div>
      <div
        style="display: flex; align-items: center; background-color: #f3f5f7"
      >
        <div style="width: 50%; text-align: center">选择设备</div>
        <u-dropdown>
          <u-dropdown-item
            v-model="value2"
            title="全部设备"
            :options="options2"
          ></u-dropdown-item>
        </u-dropdown>
      </div>
    </div>

    <div class="tabwiperC">
      
      <u-tabs-swiper
        ref="tabs"
        :list="list"
        active-color="#4dbf92"
        inactive-color=""
        count="count"
        height="120"
        :is-scroll="false"
        :current="current"
        bar-width="80"
        gutter="80"
        @change="tabsChange"
      ></u-tabs-swiper>
      

    </div>

    <div class="showDataC">
      <div
        class="showDataC-item"
        v-for="(item, index) in showDataListS"
        :key="index"
      >
        <div
          class="showDataC-item-child"
          v-if="item.status == true"
          :style="{ border: '1px solid #02B074' }"
        >
          <div class="Icon">
            <img
              v-if="item.status == true"
              style="width: 2rem"
              src="../../style/image/cargo/A2-1.png"
              alt=""
            />
            <img
              v-else
              style="width: 2rem"
              src="../../style/image/cargo/A2-2.png"
              alt=""
            />
          </div>

          <div @click="selectClickM(item)" class="Icon-bottom">
            <img
              v-if="item.select == true"
              style="width: 1rem"
              src="../../style/image/cargo/round.png"
              alt=""
            />
            <img
              v-else
              style="width: 1rem"
              src="../../style/image/cargo/selectRound.png"
              alt=""
            />
          </div>

          <div class="showDataC-item-content">
            <div
              style="
                font-size: 0.72rem;
                font-family: PingFang SC;
                font-weight: 400;
                margin: 0.2rem;
                color: #02af74;
              "
            >
              设备SN
            </div>
            <div
              style="
                font-size: 0.72rem;
                font-family: PingFang SC;
                font-weight: 300;
                margin: 0.2rem;
                color: #02af74;
              "
            >
              78767678
            </div>
          </div>
        </div>

        <div
          v-else
          class="showDataC-item-child"
          :style="{ border: '1px solid #999999' }"
        >
          <div class="Icon">
            <img
              v-if="item.status == true"
              style="width: 2rem"
              src="../../style/image/cargo/A2-1.png"
              alt=""
            />
            <img
              v-else
              style="width: 2rem"
              src="../../style/image/cargo/A2-2.png"
              alt=""
            />
          </div>
          <!-- 
                    <div class="Icon-bottom" >
                      <img  v-if="item.status==true"   style="width: 1rem" src="../../style/image/cargo/round.png"  alt="">
                      <img  v-else style="width: 1rem" src="../../style/image/cargo/selectRound.png" alt="">
                    </div> -->

          <div class="showDataC-item-content">
            <div
              style="
                font-size: 0.72rem;
                font-family: PingFang SC;
                font-weight: 400;
                margin: 0.2rem;
                color: #787878;
              "
            >
              设备SN
            </div>
            <div
              style="
                font-size: 0.72rem;
                font-family: PingFang SC;
                font-weight: 300;
                margin: 0.2rem;
                color: #787878;
              "
            >
              78767678
            </div>
          </div>
        </div>
      </div>
    </div>

    <div  @click="goCargoM" class="cargoBtnC">去铺货</div>

    <bar></bar>
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import bar from "@/pages/home/topbar.vue";

// import VConsole from "vconsole";
// const vConsole = new VConsole();

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    bar,
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public oneCount = 1;
  public list = [
    {
      name: `总数据(${this.oneCount})`,
      count: 5,
    },
    {
      name: "UC456",
      ate_count: 5,
    },
    {
      name: "UC456",
      ate_count: 5,
    },
    {
      name: "UC456",
      ate_count: 5,
    },
    {
      name: "UC789",
      ate_count: 5,
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
    {
      name: "UC789",
    },
  ];
  public showDataListS = [
    {
      status: true,
      name: "设备SN1",
      select: true,
      number: "78767678",
    },
    {
      status: false,
      name: "设备SN2",
      select: true,
      number: "78767678",
    },
    {
      status: true,
      name: "设备SN3",
      select: true,
      number: "78767678",
    },
    {
      status: false,
      name: "设备SN4",
      select: true,
      number: "78767678",
    },
    {
      status: true,
      name: "设备SN5",
      select: true,
      number: "78767678",
    },
  ];

  public current = 1;
  public options2 = [
    {
      label: "去冰",
      value: 1,
    },
    {
      label: "加冰",
      value: 2,
    },
  ];
  public value2 = 1;

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  selectClickM(data: any) {
    console.log("选择", data);

    data.select = !data.select;
  }
  ScanM() {


    uni.scanCode({
      success: function (res) {
        console.log(JSON.stringify(res));
      },
    });

      // uni.showToast({
			// 	icon:'none',
			// 	mask:true,
			// 	title: 'option.result',
			// });


  }
  goCargoM(){



  
     uni.navigateTo({
    url: './selectBusin'
    });

    // if(option.result){
		// 	uni.showToast({
		// 		icon:'none',
		// 		mask:true,
		// 		title: option.result,
		// 	});
		// }
		// uni.setStorageSync('first_falg', true);//是否第一次进入APP，true不是，跳过引导页

  }
}
</script>

<style  scoped>

.searchPP {
  background-color: white;
  padding: 0.5rem;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.scan {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabwiperC {
  border-bottom: 1px solid #f2f2f2;
}

.cargoBtnC {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
  background: #02af74;
  padding: 0.6rem 0.8rem;
  /* border-radius: 0rem; */
  border-radius: 0.1rem;

  font-size: 0.83rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

.showDataC {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0.5rem;
  justify-content: space-between;
}
.showDataC-item {
  width: 50%;
  position: relative;
}

.Icon {
  position: absolute;
  right: 0.25rem;
}

.showDataC-item-child {
  margin: 0.25rem;
  /* border: 1px solid #02B074; */
  border-radius: 0.25rem;
  /* padding: 0.5rem; */
}
.showDataC-item-content {
  padding: 0.5rem;
}

.Icon-bottom {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
}
</style>